<template>
	<div>
		<!-- QES统计 -->
		<pol-title title="QES统计">
			<template #right>
				<div class="flex text-white padding-right">
					<span>
						结晶器浇次
					</span>
					<div class="margin-left el-input-num">
						<el-select v-model="selectVal" placeholder="选择浇次号" size="small" style="width: 180px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
			</template>
		</pol-title>
		<div class="flex text-white">
			<div class="flex-sub">
				<div class="bg-blue-title2 padding text-center">炉次成分检化验结果统计</div>
				<div class="border-solid bg-tm radius-sm padding-lg">
					<div class="picChart-box" ref="picChartRef1"></div>
				</div>
			</div>

			<div class="flex-sub margin-lr-lg">
				<div class="bg-blue-title2 padding text-center">QES-铸坯质量判定结果统计</div>
				<div class="border-solid bg-tm radius-sm padding-lg">
					<div class="picChart-box" ref="picChartRef2"></div>
				</div>
			</div>

			<div class="flex-sub">
				<div class="bg-blue-title2 padding text-center">QES-质量事件统计</div>
				<div class="border-solid bg-tm radius-sm padding-lg">
					<div class="picChart-box" ref="picChartRef3"></div>
				</div>
			</div>
		</div>

		<!-- 浇次内的质量事件列表 -->
		<pol-title title="浇次内的质量事件列表" class="margin-top"></pol-title>
		<div class="flex align-center border-solid bg-tm radius-sm padding-lg text-white BarChart-warp">
			<div class="statistics-b-l">
				<div class="flex bg-blue-title2 text-center">
					<div class="flex-sub padding solid-right">事件名称</div>
					<div class="flex-sub padding solid-right">累计时长(s)</div>
					<div class="flex-sub padding">发生次数</div>
				</div>
				<div class=" text-white2 statistics-b-l2">
					<div class="flex solid-left bg-blue-furn" v-for="(item, index) in tableList" :key="index">
						<div class="flex-sub padding text-center solid-right solid-bottom">
							{{item.title}}
						</div>
						<div class="flex-sub padding text-center solid-right solid-bottom">
							{{item.value1}}
						</div>
						<div class="flex-sub padding text-center solid-right solid-bottom">
							{{item.value2}}
						</div>
					</div>
				</div>
			</div>
			<div class="flex-sub">
				<div class="BarChart-box" ref="BarChartRef"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue';
	const { proxy } = getCurrentInstance();

	const selectVal = ref('')
	const options = ref([{
		value: 'Option1',
		label: 'Option1',
	}])

	const tableList = ref([{
			title: '1#开胶坯头',
			value1: '349',
			value2: '12'
		},
		{
			title: '1#过热度偏低',
			value1: '1169',
			value2: '15'
		},
		{
			title: '1#未使用液位自动控制',
			value1: '349',
			value2: '12'
		},
		{
			title: '1#开胶坯头',
			value1: '349',
			value2: '12'
		},
		{
			title: '1#过热度偏低',
			value1: '1169',
			value2: '15'
		},
		{
			title: '1#未使用液位自动控制',
			value1: '349',
			value2: '12'
		},
		{
			title: '1#开胶坯头',
			value1: '349',
			value2: '12'
		},
		{
			title: '1#过热度偏低',
			value1: '1169',
			value2: '15'
		},
		{
			title: '1#未使用液位自动控制',
			value1: '349',
			value2: '12'
		},
	])

	const picChartRef1 = ref(null)
	const picChartRef2 = ref(null)
	const picChartRef3 = ref(null)

	// 假设这是你的数据
	const data1 = [
		{ value: 79, name: '浇铸总炉数' },
		{ value: 10, name: '为判定炉数' },
		{ value: 7, name: '合格炉数' },
		{ value: 3, name: '不合格炉数' }
	];

	const data2 = [
		{ value: 1082, name: '铸坯总支数' },
		{ value: 1050, name: '合格坯总数' },
		{ value: 20, name: '可以坯总支数' },
		{ value: 12, name: '不合格坯总支数' }
	];

	const data3 = [
		{ value: 61, name: '浇铸时长(h)' },
		{ value: 1, name: '质量事件累 计发生时长(h)' },
		{ value: 7, name: '质量事件累 计发生次数' }
	];

	// 计算总数
	const total1 = data1.reduce((sum, item) => sum + item.value, 0);
	const total2 = data2.reduce((sum, item) => sum + item.value, 0);
	const total3 = data3.reduce((sum, item) => sum + item.value, 0);

	const setData = (data, total) => {
		// 动态生成 series 数据
		const seriesData = data.map(item => {
			// 计算占比
			const percentage = ((item.value / total) * 100).toFixed(2);
			// 动态生成 name

			let itemStyle = {
				color: {
					type: 'linear', // 线性渐变
					x: 0, // 渐变起始点 x
					y: 0, // 渐变起始点 y
					x2: 1, // 渐变结束点 x
					y2: 1, // 渐变结束点 y
					colorStops: [
						{ offset: 0, color: '#ff9a9e' }, // 起始颜色
						{ offset: 1, color: '#fad0c4' } // 结束颜色
					]
				}
			}
			let dataItem = {
				name: `${item.name}：${item.value}`, // 名称 + 占比
				value: item.value,
				itemStyle: itemStyle,
			}
			if (item.name === '浇铸总炉数' || item.name === '铸坯总支数' || item.name === '浇铸时长(h)') {
				itemStyle.color.colorStops[0].color = '#9ccffe'
				itemStyle.color.colorStops[1].color = '#087ce7'
			} else if (item.name === '为判定炉数' || item.name === '合格坯总数' || item.name === '质量事件累 计发生时长(h)') {
				itemStyle.color.colorStops[0].color = '#9fe6d0'
				itemStyle.color.colorStops[1].color = '#4ada9f'
			} else if (item.name === '合格炉数' || item.name === '可以坯总支数' || item.name === '质量事件累 计发生次数') {
				itemStyle.color.colorStops[0].color = '#afc6f4'
				itemStyle.color.colorStops[1].color = '#6a87be'
			} else if (item.name === '不合格炉数' || item.name === '不合格坯总支数') {
				itemStyle.color.colorStops[0].color = '#fbe6d0'
				itemStyle.color.colorStops[1].color = '#cb965a'
			}

			return dataItem
		});

		return seriesData
	}



	let option = {
		backgroundColor: 'transparent', // 设置背景为透明
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'right',
			// data: [] // 图例显示动态生成的 name
		},
		series: [{
			top: '20px',
			type: 'pie',
			radius: '70%',
			data: [], // 图例显示动态生成的 name
			label: {
				show: true, // 显示文字标签
				formatter: '{c}', // 标签内容：名称 + 值 + 占比
			},
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};

	const BarChartRef = ref(null)
	const itemStyle = {
		color: {
			type: 'linear', // 线性渐变
			x: 0, // 渐变起始点 x
			y: 0, // 渐变起始点 y
			x2: 1, // 渐变结束点 x
			y2: 1, // 渐变结束点 y
			colorStops: [
				{ offset: 0, color: '#a0cffb' }, // 起始颜色
				{ offset: 1, color: '#0d7ee7' } // 结束颜色
			]
		}
	}
	let itemStyle1 = JSON.parse(JSON.stringify(itemStyle))

	let itemStyle2 = JSON.parse(JSON.stringify(itemStyle))
	itemStyle2.color.colorStops[0].color = '#c1fee5'
	itemStyle2.color.colorStops[0].color = '#60dca9'

	const source = [
		['product', '累计时长(s)', '发生次数'],
		['20240124', 430.3, 10.7],
		['20240125', 803.1, 5.1],
		['20240126', 860.4, 6.5],
		['20240127', 720.4, 8.1],
		['20240128', 702.4, 12.1],
		['20240129', 720.4, 5.1],
		['20240130', 702.4, 2.1],
		['20240131', 702.4, 3.1],
		['20240132', 700.4, 5.1],
		['20240133', 720.4, 8.1],
		['20240134', 702.4, 9.1]
	]

	// 计算数据的最大值和最小值
	const salesData = source.slice(1).map(row => row[1]); // 销售额数据
	const costData = source.slice(1).map(row => row[2]); // 成本数据
	const profitData = source.slice(1).map(row => row[3]); // 利润数据

	const maxValue = Math.max(...salesData, ...costData, ...profitData); // 最大值

	const maxValue2 = proxy.$common.getNumDigit(maxValue)

	let option4 = {
		backgroundColor: 'transparent', // 设置背景为透明
		legend: {},
		tooltip: {},
		dataset: {
			source: source
		},
		xAxis: { type: 'category', },
		yAxis: [{
				type: 'value',
				splitLine: {
					show: false // 隐藏辅助横线
				},
			}
		],
		series: [{
				type: 'bar',
				itemStyle: itemStyle1,
			},
			{
				type: 'bar',
				itemStyle: itemStyle2,
			}
		]
	};
	onMounted(() => {
		// 饼图
		let option1 = JSON.parse(JSON.stringify(option))
		option1.series[0].data = setData(data1, total1)
		var myChart1 = proxy.$echarts.init(picChartRef1.value, 'dark');
		myChart1.setOption(option1);

		let option2 = JSON.parse(JSON.stringify(option))
		option2.series[0].data = setData(data2, total2)
		var myChart2 = proxy.$echarts.init(picChartRef2.value, 'dark');
		myChart2.setOption(option2);

		let option3 = JSON.parse(JSON.stringify(option))
		option3.series[0].data = setData(data3, total3)
		var myChart3 = proxy.$echarts.init(picChartRef3.value, 'dark');
		myChart3.setOption(option3);

		//柱状图
		var myChart4 = proxy.$echarts.init(BarChartRef.value, 'dark');
		myChart4.setOption(option4);
	})
</script>

<style lang="scss" scoped>
	.bg-blue-title2 {
		background: linear-gradient(180deg, #173494 0%, #328FD4 100%);
	}

	.picChart-box {
		width: 100%;
		height: 260px;
	}

	.BarChart-warp {
		height: calc(100vh - 585px);

		.statistics-b-l {
			flex-basis: 40%;
		}

		.statistics-b-l2 {
			flex-basis: 40%;
			overflow-y: auto;
		}

		.BarChart-box {
			width: 100%;
			height: calc(100vh - 610px);
		}
	}
</style>